<template>
  <div class="app-container">

    <!-- 输入框 -->
    <span style="font-size: 14px;margin-right: 20px">姓名</span>
    <el-input prefix-icon="el-icon-search" placeholder="请输入内容" style="width: 200px;margin-right: 20px"/>
    <!-- 日期选择器 -->
    <span style="font-size: 14px;margin-right: 20px">日期</span>
    <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" style="margin-right: 20px"
    >
    </el-date-picker>
    <!-- 搜索 -->
    <el-button type="primary">搜索</el-button>
    <!-- 添加 -->
    <el-button type="success" @click="handleAdd">添加</el-button>
    <!-- 页面跳转 -->
    <el-button type="danger" @click="goToPage" plain>跳转Dashboard</el-button>

    <!-- 分割线 -->
    <el-divider/>

    <!-- 表格 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <!-- ID -->
      <el-table-column align="center" label="ID" width="200">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <!-- 标题 -->
      <el-table-column label="标题">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <!-- 作者 -->
      <el-table-column label="作者" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>
      <!-- 网页浏览量 -->
      <el-table-column label="网页浏览量" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.pageViews }}
        </template>
      </el-table-column>
      <!-- 状态 -->
      <el-table-column class-name="status-col" label="状态" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status === 0 ? 'Off' : 'Open' }}</el-tag>
        </template>
      </el-table-column>
      <!-- 显示时间 -->
      <el-table-column align="center" prop="created_at" label="显示时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" style="margin-right: 10px"/>
          <span>{{ scope.row.displayTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope)"
          >编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 表单对话框 -->
    <el-dialog :title="formTitle" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="作者" :label-width="formLabelWidth">
          <el-input v-model="form.author" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="网页浏览量" :label-width="formLabelWidth">
          <el-input v-model="form.pageViews" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="form.status"
            active-value="1"
            inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="显示时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.displayTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleEnter">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { add, del, getById, getList, update } from '@/api/table'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: 'danger', // 危险
        1: 'success' // 成功
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      // 日期
      date: '',
      // 表格数据
      list: null,
      // 列表加载状态
      listLoading: true,
      // 对话框表单数据
      form: {
        id: undefined,
        // 标题
        title: undefined,
        // 作者
        author: undefined,
        // 网页浏览量
        pageViews: undefined,
        // 状态
        status: undefined,
        // 显示时间
        displayTime: undefined
      },
      // 表单标签宽度
      formLabelWidth: '100px',
      // 表单标题
      formTitle: '1',
      // 添加或者更新标志位
      addOrUpdate: false,
      // 对话框标志位
      dialogFormVisible: false
    }
  },
  // 钩子函数-实例创建后执行
  created() {
    this.fetchData()
  },
  methods: {
    // 获取数据
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.rows
        this.listLoading = false
      })
    },
    // 确定
    handleEnter() {
      if (this.addOrUpdate) {
        console.log('添加数据')
        add(this.form).then(response => {
          if (response.code === 200) {
            this.fetchData()
            this.$message({
              message: '添加成功！',
              type: 'success'
            })
          }
        })
      } else {
        // 更新表格数据
        update(this.form).then(response => {
          if (response.code === 200) {
            this.fetchData()
            this.$message({
              message: '更新成功！',
              type: 'success'
            })
          }
        })
      }
      // 重置表单
      this.reset()
      // 隐藏对话框
      this.dialogFormVisible = false
    },
    // 取消
    handleCancel() {
      console.log('取消')
      // 重置表单
      this.reset()
      // 显示表单对话窗
      this.dialogFormVisible = false
    },
    // 添加
    handleAdd() {
      // 重置表单
      this.reset()
      // 设置默认时间
      this.form.displayTime = new Date()
      // 更新标题
      this.formTitle = '添加数据'
      // 显示弹窗
      this.dialogFormVisible = true
      // 更新标志位
      this.addOrUpdate = true
    },
    // 编辑
    handleEdit(scope) {
      // 更新标题
      this.formTitle = '编辑数据'
      // 回显数据
      getById(scope.row.id).then(response => {
        if (response.code === 200) {
          this.form.id = response.data.id
          this.form.title = response.data.title
          this.form.author = response.data.author
          this.form.pageViews = response.data.pageViews
          this.form.status = response.data.status
          this.form.displayTime = response.data.displayTime
        }
      })
      // 显示对话框
      this.dialogFormVisible = true
      // 更新标志位
      this.addOrUpdate = false
      // 打印数据
      console.log(scope)
    },
    // 删除
    handleDelete(scope) {
      del(scope.row.id).then(response => {
        if (response.code === 200) {
          this.fetchData()
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
        }
      })
    },
    // 表单重置
    reset() {
      this.form = {
        id: '',
        // 标题
        title: '',
        // 作者
        author: '',
        // 网页浏览量
        pageViews: '',
        // 状态
        status: '',
        // 显示时间
        displayTime: ''
      }
    },
    // 状态更改对话框
    stateHandle(scope) {
      // 调用ElementUi的confirm
      this.$confirm(scope.row.state ? '是否启用状态？' : '是否禁用状态？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认
        this.tableData[scope.$index].state = scope.row.state
      }).catch(() => {
        // 取消
        this.tableData[scope.$index].state = !scope.row.state
      })
    },
    // 页面跳转
    goToPage(){
      this.$router.push('/')
    }
  }
}
</script>
